<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理系统 - 班级管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: #f5f7fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            color: #333;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #2c3e50, #1a2530);
            color: white;
            padding: 12px 25px;
            position: relative;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-container img {
            height: 40px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .logo-container h1 {
            font-size: 1.6rem;
            font-weight: 600;
            color: white;
        }

        .user-info-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            font-weight: bold;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .user-avatar:hover {
            transform: scale(1.05);
            background: #2980b9;
        }

        .dropdown-menu {
            position: absolute;
            top: 60px;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            width: 200px;
            overflow: hidden;
            z-index: 1000;
            display: none;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-header {
            padding: 12px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
        }

        .dropdown-header h4 {
            font-size: 1rem;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .dropdown-header p {
            font-size: 0.85rem;
            color: #777;
        }

        .dropdown-item {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #555;
            font-size: 0.95rem;
        }

        .dropdown-item:hover {
            background: #f0f7ff;
            color: #3498db;
        }

        .dropdown-item i {
            width: 20px;
            text-align: center;
            font-size: 0.9rem;
        }

        .dropdown-divider {
            height: 1px;
            background: #eee;
            margin: 5px 0;
        }

        .logout-btn {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 7px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.95rem;
        }

        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

        .container {
            display: flex;
            flex: 1;
            padding: 15px;
            max-width: 1600px;
            margin: 0 auto;
            width: 100%;
            gap: 15px;
        }

        .sidebar {
            width: 220px;
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            height: fit-content;
        }

        .sidebar-header {
            padding: 12px 10px;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sidebar-header i {
            font-size: 1.2rem;
            color: #3498db;
        }

        .sidebar-header h2 {
            color: #2c3e50;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .sidebar ul li {
            margin: 8px 0;
        }

        .sidebar ul li a {
            text-decoration: none;
            color: #555;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 15px;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-size: 1rem;
            font-weight: 500;
        }

        .sidebar ul li a:hover {
            background: #f0f7ff;
            color: #3498db;
        }

        .sidebar ul li a.active {
            background: #e1f0ff;
            color: #2980b9;
            font-weight: 600;
        }

        .sidebar ul li a i {
            font-size: 1.1rem;
            width: 22px;
            text-align: center;
        }

        .main-content {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .welcome-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }

        .welcome-header h2 {
            color: #2c3e50;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .welcome-header h2 i {
            color: #3498db;
            background: #e1f0ff;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
        }

        .class-selector {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #f0f7ff;
            padding: 12px 15px;
            border-radius: 8px;
            width: fit-content;
        }

        .class-selector label {
            font-weight: 500;
            color: #2980b9;
            font-size: 0.95rem;
        }

        .class-selector select {
            padding: 8px 15px;
            border: 1px solid #cce5ff;
            border-radius: 6px;
            background: white;
            font-size: 0.95rem;
            color: #2c3e50;
            width: 180px;
            appearance: none;
            background-repeat: no-repeat;
            background-position: calc(100% - 12px) center;
            background-size: 12px;
            padding-right: 35px;
        }

        .section {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
            border: 1px solid #eaeaea;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .section-header h3 {
            color: #2c3e50;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .action-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .action-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }

        .class-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .class-card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
            border: 1px solid #eaeaea;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .class-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            border-color: #cce5ff;
        }

        .class-card h4 {
            color: #2c3e50;
            font-size: 1.2rem;
            margin-bottom: 8px;
        }

        .class-card p {
            color: #555;
            margin: 4px 0;
            font-size: 0.9rem;
        }

        .class-card .class-meta {
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
            padding-top: 8px;
            border-top: 1px solid #f0f7ff;
        }

        .class-card .class-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }

        .class-card button {
            flex: 1;
            background: #e1f0ff;
            color: #2980b9;
            border: none;
            padding: 7px 12px;
            border-radius: 18px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        .class-card button:hover {
            background: #3498db;
            color: white;
        }

        .data-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);
            background: white;
            border: 1px solid #eaeaea;
            margin-top: 12px;
            font-size: 0.95rem;
        }

        .data-table th {
            background: #3498db;
            color: white;
            padding: 14px 12px;
            text-align: left;
            font-weight: 500;
            font-size: 0.95rem;
        }

        .data-table th:first-child {
            border-top-left-radius: 8px;
        }

        .data-table th:last-child {
            border-top-right-radius: 8px;
        }

        .data-table td {
            padding: 12px;
            border-bottom: 1px solid #f0f7ff;
            color: #555;
        }

        .data-table tr:last-child td {
            border-bottom: none;
        }

        .data-table tr:nth-child(even) {
            background-color: #f9fcff;
        }

        .data-table tr:hover {
            background-color: #f0f7ff;
        }

        .data-table .status-badge {
            padding: 4px 10px;
            border-radius: 18px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .status-pending {
            background-color: #fff8e6;
            color: #f39c12;
        }

        .status-submitted {
            background-color: #e6f7e9;
            color: #27ae60;
        }
        
        .status-archived {
            background-color: #f0f0f0;
            color: #777;
        }

        .data-table button {
            background: #e1f0ff;
            color: #2980b9;
            border: none;
            padding: 7px 12px;
            border-radius: 18px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        .data-table button:hover {
            background: #3498db;
            color: white;
        }

        .grade-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 18px;
            font-weight: 600;
            background: #e1f0ff;
            color: #2980b9;
            font-size: 0.9rem;
        }

        .progress-bar {
            height: 5px;
            background: #e0edf8;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 4px;
        }

        .progress {
            height: 100%;
            background: #3498db;
            border-radius: 3px;
        }

        /* 模态框样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            color: #2c3e50;
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #777;
            transition: all 0.3s ease;
        }

        .close-btn:hover {
            color: #e74c3c;
            transform: rotate(90deg);
        }

        .modal-body {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #2c3e50;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eaeaea;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-secondary {
            background: #ecf0f1;
            color: #34495e;
        }

        .btn-secondary:hover {
            background: #d5dbdb;
        }

        .btn-danger {
            background: #e74c3c;
            color: white;
        }

        .btn-danger:hover {
            background: #c0392b;
        }

        /* Vue加载状态样式 */
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 180px;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(52, 152, 219, 0.3);
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* 响应式设计 */
        @media (max-width: 800px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                margin-bottom: 15px;
            }
            
            .class-grid {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            }
        }

        @media (max-width: 668px) {
            .navbar {
                padding: 10px 12px;
            }

            .logo-container h1 {
                font-size: 1.3rem;
            }

            .welcome-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .class-selector {
                width: 100%;
            }

            .section-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .action-btn {
                width: 100%;
                justify-content: center;
            }

            .class-grid {
                grid-template-columns: 1fr;
            }
            
            .modal-content {
                width: 95%;
            }
        }
        
        /* 班级管理视图样式 */
        .class-management-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .class-management-header h2 {
            color: #2c3e50;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .class-management-header .header-actions {
            display: flex;
            gap: 12px;
        }
        
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
            border: 1px solid #eaeaea;
            display: flex;
            flex-direction: column;
        }
        
        .stat-card h3 {
            color: #555;
            font-size: 1rem;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .stat-card .value {
            font-size: 2rem;
            font-weight: 700;
            color: #2c3e50;
        }
        
        .stat-card .trend {
            font-size: 0.9rem;
            margin-top: 5px;
            color: #27ae60;
        }
        
        .stat-card .trend.down {
            color: #e74c3c;
        }
        
        .class-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <div class="logo-container">
                <img src=""
                    alt="LOGO">
                <h1>教师管理系统</h1>
            </div>

            <div class="user-info-container">
                <div class="user-avatar" @click="toggleDropdown">{{ userInitials }}</div>
                <div class="dropdown-menu" :class="{show: isDropdownOpen}">
                    <div class="dropdown-header">
                        <h4>{{ user.name }}</h4>
                    </div>
                    <div class="dropdown-item" @click="editProfile">
                        <i class="fas fa-user-edit"></i>编辑个人信息
                    </div>
                    <div class="dropdown-item" @click="changePassword">
                        <i class="fas fa-key"></i>修改密码
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-item" @click="logout">
                        <i class="fas fa-sign-out-alt"></i>退出登录
                    </div>
                </div>
                <button class="logout-btn" @click="logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </button>
            </div>
        </div>

        <!-- 页面容器 -->
        <div class="container">
            <!-- 侧边栏 -->
            <div class="sidebar">
                <div class="sidebar-header">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <h2>教师控制台</h2>
                </div>
                <ul>
                    <li v-for="(item, index) in menuItems" :key="index">
                        <a href="#" :class="{active: activeMenu === item.id}" @click.prevent="setActiveMenu(item.id)">
                            <i :class="item.icon"></i>{{ item.name }}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <div v-if="activeMenu === 'dashboard'">
                    <!-- 控制面板视图 -->
                    <div class="welcome-header">
                        <h2>
                            <i class="fas fa-user-graduate"></i>
                            欢迎回来，{{ user.name }}
                        </h2>
                        <div class="class-selector">
                            <label for="class-select"><i class="fas fa-users"></i> 选择班级：</label>
                            <select id="class-select" v-model="selectedClass">
                                <option v-for="(cls, index) in classes" :key="index" :value="cls.id">
                                    {{ cls.name }}
                                </option>
                            </select>
                        </div>
                    </div>

                    <!-- 待批改实验 -->
                    <div class="section">
                        <div class="section-header">
                            <h3><i class="fas fa-check-circle"></i> 待批改实验</h3>
                            <button class="action-btn" @click="refreshPendingReports">
                                <i class="fas fa-sync-alt"></i> 刷新列表
                            </button>
                        </div>

                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>学生姓名</th>
                                    <th>学号</th>
                                    <th>实验名称</th>
                                    <th>提交时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(report, index) in pendingReports" :key="index">
                                    <td>{{ report.studentName }}</td>
                                    <td>{{ report.studentId }}</td>
                                    <td>{{ report.experimentName }}</td>
                                    <td>{{ report.submitTime }}</td>
                                    <td>
                                        <span class="status-badge status-pending">
                                            {{ report.status }}
                                        </span>
                                    </td>
                                    <td>
                                        <button @click="gradeReport(report)">
                                            <i class="fas fa-check"></i> 批改
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="loading-container" v-if="loadingReports">
                            <div class="loading-spinner"></div>
                        </div>

                        <div v-if="pendingReports.length === 0 && !loadingReports" class="no-data" style="text-align: center; padding: 20px; color: #777;">
                            <i class="fas fa-check-circle" style="font-size: 3rem; color: #27ae60; margin-bottom: 15px;"></i>
                            <h3>没有待批改的实验报告</h3>
                            <p>所有实验报告均已批改完成</p>
                        </div>
                    </div>
                </div>

                <div v-else-if="activeMenu === 'classes'">
                    <!-- 班级管理视图 -->
                    <div class="class-management-header">
                        <h2><i class="fas fa-users"></i> 班级管理</h2>
                        <div class="header-actions">
                            <button class="action-btn" @click="openCreateClassModal">
                                <i class="fas fa-plus-circle"></i> 创建新班级
                            </button>
                            <button class="action-btn" style="background: #27ae60;">
                                <i class="fas fa-file-export"></i> 导出名单
                            </button>
                        </div>
                    </div>
                    
                    <div class="stats-container">
                        <div class="stat-card">
                            <h3><i class="fas fa-users"></i> 班级总数</h3>
                            <div class="value">{{ classes.length }}</div>
                            <div class="trend">+3 本学期新增</div>
                        </div>
                        <div class="stat-card">
                            <h3><i class="fas fa-user-graduate"></i> 学生总数</h3>
                            <div class="value">{{ totalStudents }}</div>
                            <div class="trend">+42 本学期新增</div>
                        </div>
                        <div class="stat-card">
                            <h3><i class="fas fa-flask"></i> 实验总数</h3>
                            <div class="value">{{ totalExperiments }}</div>
                            <div class="trend">+12 本学期新增</div>
                        </div>
                        <div class="stat-card">
                            <h3><i class="fas fa-chart-line"></i> 平均完成率</h3>
                            <div class="value">87%</div>
                            <div class="trend">↑ 较上学期提升 5%</div>
                        </div>
                    </div>
                    
                    <div class="class-detail-header">
                        <h3 style="color: #2c3e50; font-size: 1.4rem;">
                            <i class="fas fa-list"></i> 所有班级
                        </h3>
                        <div class="class-selector">
                            <label for="class-filter"><i class="fas fa-filter"></i> 状态：</label>
                            <select id="class-filter" v-model="classFilter">
                                <option value="all">全部班级</option>
                                <option value="active">活跃班级</option>
                                <option value="archived">归档班级</option>
                            </select>
                        </div>
                    </div>

                    <div class="class-grid">
                        <div class="class-card" v-for="(cls, index) in filteredClasses" :key="index">
                            <h4>{{ cls.name }}</h4>
                            <p><i class="fas fa-user-graduate"></i> 学生数: {{ cls.studentCount }}</p>
                            <p><i class="fas fa-flask"></i> 实验数: {{ cls.experimentCount }}</p>
                            <div class="class-meta">
                                <span class="status-badge" :class="cls.status === 'active' ? 'status-submitted' : 'status-archived'">
                                    {{ cls.status === 'active' ? '活跃' : '归档' }}
                                </span>
                                <span>{{ cls.createdDate }}</span>
                            </div>

                            <div class="class-actions">
                                <button @click="viewClass(cls)">
                                    <i class="fas fa-cog"></i> 管理
                                </button>
                                <button @click="uploadRoster(cls)">
                                    <i class="fas fa-upload"></i> 上传名单
                                </button>
                                <button @click="exportClassData(cls)" style="background: #e6f7e9; color: #27ae60;">
                                    <i class="fas fa-download"></i> 导出
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div v-if="filteredClasses.length === 0" class="no-data" style="text-align: center; padding: 40px; color: #777;">
                        <i class="fas fa-folder-open" style="font-size: 3rem; color: #3498db; margin-bottom: 15px;"></i>
                        <h3>没有找到符合条件的班级</h3>
                        <p>点击上方"创建新班级"按钮添加您的第一个班级</p>
                    </div>
                </div>
                
                <div v-else>
                    <div class="welcome-header">
                        <h2>
                            <i class="fas fa-user-graduate"></i>
                            {{ user.name }}，{{ activeMenuTitle }}
                        </h2>
                    </div>
                    
                    <div class="section">
                        <div class="loading-container">
                            <div class="loading-spinner"></div>
                            <p style="margin-top: 15px;">正在加载{{ activeMenuTitle }}数据...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 创建班级模态框 -->
        <div class="modal" v-if="showCreateClassModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3><i class="fas fa-plus-circle"></i> 创建新班级</h3>
                    <button class="close-btn" @click="showCreateClassModal = false">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="className">班级名称</label>
                        <input type="text" id="className" class="form-control" v-model="newClass.name" placeholder="请输入班级名称">
                    </div>
                    
                    <div class="form-group">
                        <label for="classSubject">所属学科</label>
                        <input type="text" id="classSubject" class="form-control" v-model="newClass.subject" placeholder="请输入学科名称">
                    </div>
                    
                    <div class="form-group">
                        <label for="classTerm">学期</label>
                        <select id="classTerm" class="form-control" v-model="newClass.term">
                            <option value="">请选择学期</option>
                            <option value="2023-2024学年第一学期">2023-2024学年第一学期</option>
                            <option value="2023-2024学年第二学期">2023-2024学年第二学期</option>
                            <option value="2024-2025学年第一学期">2024-2025学年第一学期</option>
                            <option value="2024-2025学年第二学期">2024-2025学年第二学期</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="classDescription">班级描述</label>
                        <textarea id="classDescription" class="form-control" v-model="newClass.description" rows="3" placeholder="请输入班级描述（可选）"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" @click="showCreateClassModal = false">取消</button>
                    <button class="btn btn-primary" @click="createClass">创建班级</button>
                </div>
            </div>
        </div>
        
        <!-- 班级详情模态框 -->
        <div class="modal" v-if="showClassDetailModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3><i class="fas fa-users"></i> 班级详情 - {{ currentClass.name }}</h3>
                    <button class="close-btn" @click="showClassDetailModal = false">&times;</button>
                </div>
                <div class="modal-body">
                    <div style="display: flex; gap: 20px; margin-bottom: 20px;">
                        <div style="flex: 1; background: #f0f7ff; padding: 15px; border-radius: 8px;">
                            <h4 style="margin-bottom: 10px; color: #2980b9;">基本信息</h4>
                            <p><strong>学科：</strong> {{ currentClass.subject }}</p>
                            <p><strong>学期：</strong> {{ currentClass.term }}</p>
                            <p><strong>创建日期：</strong> {{ currentClass.createdDate }}</p>
                            <p><strong>状态：</strong> 
                                <span class="status-badge" :class="currentClass.status === 'active' ? 'status-submitted' : 'status-archived'">
                                    {{ currentClass.status === 'active' ? '活跃' : '归档' }}
                                </span>
                            </p>
                        </div>
                        
                        <div style="flex: 1; background: #f9f0ff; padding: 15px; border-radius: 8px;">
                            <h4 style="margin-bottom: 10px; color: #9b59b6;">学生统计</h4>
                            <p><strong>学生总数：</strong> {{ currentClass.studentCount }}</p>
                            <p><strong>男生人数：</strong> {{ currentClass.maleCount || '0' }}</p>
                            <p><strong>女生人数：</strong> {{ currentClass.femaleCount || '0' }}</p>
                            <p><strong>平均成绩：</strong> {{ currentClass.averageGrade || '0' }}</p>
                        </div>
                    </div>
                    
                    <h4 style="margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                        <i class="fas fa-list"></i> 实验列表
                    </h4>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>实验名称</th>
                                <th>截止日期</th>
                                <th>提交率</th>
                                <th>平均分</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(exp, index) in currentClass.experiments" :key="index">
                                <td>{{ exp.name }}</td>
                                <td>{{ exp.deadline }}</td>
                                <td>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <span>{{ exp.submitRate }}%</span>
                                        <div style="flex: 1; max-width: 100px;">
                                            <div class="progress-bar">
                                                <div class="progress" :style="{width: exp.submitRate + '%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ exp.averageScore }}</td>
                                <td>
                                    <button style="padding: 5px 10px; font-size: 0.85rem;">
                                        <i class="fas fa-eye"></i> 查看
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div v-if="currentClass.experiments.length === 0" style="text-align: center; padding: 20px; color: #777;">
                        <i class="fas fa-flask" style="font-size: 2rem; color: #3498db; margin-bottom: 10px;"></i>
                        <p>暂无实验数据</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" @click="showClassDetailModal = false">关闭</button>
                    <button class="btn btn-danger" v-if="currentClass.status === 'active'" @click="archiveClass(currentClass)">
                        <i class="fas fa-archive"></i> 归档班级
                    </button>
                    <button class="btn btn-primary" v-else @click="activateClass(currentClass)">
                        <i class="fas fa-check-circle"></i> 激活班级
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 上传名单模态框 -->
        <div class="modal" v-if="showUploadModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3><i class="fas fa-upload"></i> 上传学生名单 - {{ currentClass.name }}</h3>
                    <button class="close-btn" @click="showUploadModal = false">&times;</button>
                </div>
                <div class="modal-body">
                    <div style="margin-bottom: 20px; padding: 15px; background: #fff8e6; border-radius: 8px;">
                        <h4 style="margin-bottom: 10px; color: #f39c12;">上传说明</h4>
                        <p>1. 请下载学生名单模板并填写信息</p>
                        <p>2. 支持文件格式: .xlsx, .xls, .csv</p>
                        <p>3. 文件大小不超过5MB</p>
                    </div>
                    
                    <div class="form-group">
                        <label>下载模板</label>
                        <div style="display: flex; gap: 10px;">
                            <button class="btn" style="background: #27ae60; color: white;">
                                <i class="fas fa-file-excel"></i> Excel模板
                            </button>
                            <button class="btn" style="background: #3498db; color: white;">
                                <i class="fas fa-file-csv"></i> CSV模板
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="rosterFile">上传学生名单</label>
                        <div style="border: 2px dashed #3498db; border-radius: 8px; padding: 30px; text-align: center; cursor: pointer;"
                             @dragover.prevent @drop="handleDrop">
                            <input type="file" id="rosterFile" style="display: none;" @change="handleFileSelect">
                            <i class="fas fa-cloud-upload-alt" style="font-size: 2.5rem; color: #3498db; margin-bottom: 10px;"></i>
                            <p>拖放文件到此处或<strong style="color: #3498db; cursor: pointer;" @click="triggerFileInput">点击选择文件</strong></p>
                            <p style="color: #777; font-size: 0.9rem; margin-top: 5px;">支持 .xlsx, .xls, .csv 格式</p>
                            <p v-if="selectedFile" style="margin-top: 15px;">
                                <i class="fas fa-file" style="margin-right: 5px;"></i> 
                                {{ selectedFile.name }} ({{ formatFileSize(selectedFile.size) }})
                            </p>
                        </div>
                    </div>
                    
                    <div v-if="uploadProgress > 0" style="margin-top: 20px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                            <span>上传进度</span>
                            <span>{{ uploadProgress }}%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress" :style="{width: uploadProgress + '%'}"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" @click="showUploadModal = false">取消</button>
                    <button class="btn btn-primary" :disabled="!selectedFile" @click="uploadFile">
                        <i class="fas fa-upload"></i> 上传名单
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                // 用户信息
                user: {
                    name: '张教授',
                    email: 'zhang@university.edu',
                    department: '计算机科学与技术学院',
                    initials: 'Z'
                },

                // 菜单项
                menuItems: [
                    { id: 'classes', name: '班级管理', icon: 'fas fa-users' },
                    { id: 'dashboard', name: '控制面板', icon: 'fas fa-tachometer-alt' },
                    { id: 'grading', name: '实验批改', icon: 'fas fa-check-circle' },
                    { id: 'experiments', name: '实验管理', icon: 'fas fa-flask' },
                    { id: 'settings', name: '系统设置', icon: 'fas fa-cog' }
                ],
                activeMenu: 'classes',
                isDropdownOpen: false,
                
                // 班级过滤
                classFilter: 'all',

                // 班级信息
                classes: [],
                loadingClasses: false,
                selectedClass: 'c1',
                
                // 模态框状态
                showCreateClassModal: false,
                showClassDetailModal: false,
                showUploadModal: false,
                currentClass: {},
                
                // 新班级表单
                newClass: {
                    name: '',
                    subject: '',
                    term: '',
                    description: ''
                },
                
                // 文件上传
                selectedFile: null,
                uploadProgress: 0,

                // 待批改实验报告
                pendingReports: [],
                loadingReports: true,

                // 加载状态
                loading: false
            },

            computed: {
                // 用户首字母
                userInitials() {
                    return this.user.name ? this.user.name.charAt(0).toUpperCase() : 'T';
                },
                
                // 当前菜单标题
                activeMenuTitle() {
                    const menu = this.menuItems.find(item => item.id === this.activeMenu);
                    return menu ? menu.name : '';
                },
                
                // 过滤班级
                filteredClasses() {
                    if (this.classFilter === 'all') return this.classes;
                    return this.classes.filter(cls => cls.status === this.classFilter);
                },
                
                // 学生总数
                totalStudents() {
                    return this.classes.reduce((total, cls) => total + cls.studentCount, 0);
                },
                
                // 实验总数
                totalExperiments() {
                    return this.classes.reduce((total, cls) => total + cls.experimentCount, 0);
                }
            },

            created() {
                // 页面加载时从会话中获取用户信息
                this.loadUserFromSession();
                // 组件创建时获取待批改实验报告
                this.fetchPendingReports();
                // 组件创建时获取班级信息
                this.loadClasses();
            },

            methods: {
                // 从会话中加载用户信息
                loadUserFromSession() {
                    if (sessionStorage.getItem('userInfo')) {
                        const sessionUser = JSON.parse(sessionStorage.getItem('userInfo'));
                        this.user.name = sessionUser.name;
                        this.user.employeeId = sessionUser.id;
                        this.user.role = sessionUser.role;
                    }
                },

                loadClasses() {
                    this.loading = true;
                    
                    // 模拟API请求获取班级数据
                    setTimeout(() => {
                        this.classes = [
                            {
                                id: 'c1',
                                name: '计算机科学2023级',
                                studentCount: 45,
                                experimentCount: 5,
                                status: 'active',
                                createdDate: '2023-09-01',
                                subject: '计算机基础',
                                term: '2023-2024学年第一学期',
                                maleCount: 30,
                                femaleCount: 15,
                                averageGrade: 85.6,
                                experiments: [
                                    { name: '实验一：算法设计', deadline: '2023-10-15', submitRate: 92, averageScore: 88.5 },
                                    { name: '实验二：数据结构', deadline: '2023-11-05', submitRate: 85, averageScore: 86.2 },
                                    { name: '实验三：操作系统', deadline: '2023-11-25', submitRate: 78, averageScore: 82.3 }
                                ]
                            },
                            {
                                id: 'c2',
                                name: '软件工程2023级',
                                studentCount: 38,
                                experimentCount: 4,
                                status: 'active',
                                createdDate: '2023-09-01',
                                subject: '软件工程导论',
                                term: '2023-2024学年第一学期',
                                maleCount: 25,
                                femaleCount: 13,
                                averageGrade: 82.3,
                                experiments: [
                                    { name: '实验一：需求分析', deadline: '2023-10-12', submitRate: 95, averageScore: 90.2 },
                                    { name: '实验二：系统设计', deadline: '2023-11-02', submitRate: 88, averageScore: 85.6 }
                                ]
                            },
                            {
                                id: 'c3',
                                name: '人工智能2023级',
                                studentCount: 42,
                                experimentCount: 3,
                                status: 'archived',
                                createdDate: '2023-02-15',
                                subject: '人工智能基础',
                                term: '2022-2023学年第二学期',
                                maleCount: 28,
                                femaleCount: 14,
                                averageGrade: 87.9,
                                experiments: [
                                    { name: '实验一：机器学习基础', deadline: '2023-03-20', submitRate: 90, averageScore: 86.7 }
                                ]
                            },
                            {
                                id: 'c4',
                                name: '网络工程2023级',
                                studentCount: 36,
                                experimentCount: 4,
                                status: 'active',
                                createdDate: '2023-09-01',
                                subject: '计算机网络',
                                term: '2023-2024学年第一学期',
                                maleCount: 22,
                                femaleCount: 14,
                                averageGrade: 84.2,
                                experiments: [
                                    { name: '实验一：网络配置', deadline: '2023-10-10', submitRate: 88, averageScore: 85.0 },
                                    { name: '实验二：协议分析', deadline: '2023-10-30', submitRate: 82, averageScore: 83.5 }
                                ]
                            }
                        ];
                        
                        if (this.classes.length > 0) {
                            this.selectedClass = this.classes[0].id;
                        }
                        
                        this.loading = false;
                    }, 800);
                },

                // 从后端获取待批改实验报告
                fetchPendingReports() {
                    this.loadingReports = true;

                    // 模拟API请求
                    setTimeout(() => {
                        this.pendingReports = [
                            {
                                id: 'r1', studentName: '张三', studentId: 's2023001',
                                experimentName: '实验一：算法设计', submitTime: '2023-10-18 14:30', status: '待批改'
                            },
                            {
                                id: 'r2', studentName: '李四', studentId: 's2023002',
                                experimentName: '实验二：数据结构', submitTime: '2023-10-19 09:15', status: '待批改'
                            }
                        ];
                        this.loadingReports = false;
                    }, 1000);
                },
                
                // 打开创建班级模态框
                openCreateClassModal() {
                    this.newClass = {
                        name: '',
                        subject: '',
                        term: '',
                        description: ''
                    };
                    this.showCreateClassModal = true;
                },
                
                // 创建新班级
                createClass() {
                    if (!this.newClass.name) {
                        alert('请填写班级名称');
                        return;
                    }
                    
                    // 模拟API请求
                    this.loading = true;
                    
                    setTimeout(() => {
                        const newClass = {
                            id: 'c' + (this.classes.length + 1),
                            name: this.newClass.name,
                            studentCount: 0,
                            experimentCount: 0,
                            status: 'active',
                            createdDate: new Date().toISOString().split('T')[0],
                            subject: this.newClass.subject,
                            term: this.newClass.term,
                            description: this.newClass.description,
                            experiments: []
                        };
                        
                        this.classes.push(newClass);
                        this.showCreateClassModal = false;
                        this.loading = false;
                        
                        alert(`班级 "${this.newClass.name}" 创建成功！`);
                    }, 800);
                },
                
                // 查看班级详情
                viewClass(cls) {
                    this.currentClass = {...cls};
                    this.showClassDetailModal = true;
                },
                
                // 归档班级
                archiveClass(cls) {
                    if (confirm(`确定要归档班级 "${cls.name}" 吗？归档后班级将不再活跃。`)) {
                        cls.status = 'archived';
                        this.showClassDetailModal = false;
                        alert(`班级 "${cls.name}" 已归档`);
                    }
                },
                
                // 激活班级
                activateClass(cls) {
                    cls.status = 'active';
                    this.showClassDetailModal = false;
                    alert(`班级 "${cls.name}" 已重新激活`);
                },
                
                // 打开上传名单模态框
                uploadRoster(cls) {
                    this.currentClass = {...cls};
                    this.selectedFile = null;
                    this.uploadProgress = 0;
                    this.showUploadModal = true;
                },
                
                // 导出班级数据
                exportClassData(cls) {
                    alert(`开始导出班级数据: ${cls.name}`);
                    // 模拟导出过程
                    setTimeout(() => {
                        alert(`班级数据导出成功！\n文件名: ${cls.name}_学生名单.xlsx`);
                    }, 1500);
                },
                
                // 触发文件选择
                triggerFileInput() {
                    document.getElementById('rosterFile').click();
                },
                
                // 处理文件选择
                handleFileSelect(event) {
                    this.selectedFile = event.target.files[0];
                },
                
                // 处理拖放文件
                handleDrop(event) {
                    event.preventDefault();
                    this.selectedFile = event.dataTransfer.files[0];
                },
                
                // 格式化文件大小
                formatFileSize(bytes) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                },
                
                // 上传文件
                uploadFile() {
                    if (!this.selectedFile) return;
                    
                    // 模拟上传过程
                    this.uploadProgress = 0;
                    const interval = setInterval(() => {
                        this.uploadProgress += 10;
                        if (this.uploadProgress >= 100) {
                            clearInterval(interval);
                            
                            // 模拟上传成功
                            setTimeout(() => {
                                alert(`学生名单上传成功！\n班级: ${this.currentClass.name}\n文件: ${this.selectedFile.name}`);
                                this.showUploadModal = false;
                                
                                // 更新学生数量
                                this.currentClass.studentCount += 5;
                                this.classes = this.classes.map(cls => 
                                    cls.id === this.currentClass.id ? this.currentClass : cls
                                );
                            }, 500);
                        }
                    }, 200);
                },

                // 批改报告
                gradeReport(report) {
                    alert(`批改报告: ${report.studentName} - ${report.experimentName}`);
                },

                // 刷新待批改报告列表
                refreshPendingReports() {
                    this.fetchPendingReports();
                },

                // 设置活动菜单
                setActiveMenu(menuId) {
                    this.activeMenu = menuId;
                },

                // 切换下拉菜单
                toggleDropdown() {
                    this.isDropdownOpen = !this.isDropdownOpen;
                },

                // 编辑个人信息
                editProfile() {
                    alert('编辑个人信息功能');
                    this.closeDropdown();
                },
                
                // 修改密码
                changePassword() {
                    alert('修改密码功能');
                    this.closeDropdown();
                },

                // 关闭下拉菜单
                closeDropdown() {
                    this.isDropdownOpen = false;
                },

                // 退出登录
                logout() {
                    if (confirm('确定要退出系统吗？')) {
                        // 清除认证信息
                        localStorage.removeItem('authToken');
                        sessionStorage.removeItem('authToken');
                        // 重定向到登录页
                        window.location.href = '/index.html';
                    }
                }
            }
        });
    </script>
</body>
</html>